<template>
  <div class="publish">
    <main class="publish-status">
      <header>
        <img :src="info.logo" alt="" srcset="" width="50" />
        <span>{{ info.name }}</span>
      </header>
      <section>
        <span>
          发布状态
          <el-tag :type="type[info.releaseStatus]">{{ status[info.releaseStatus] }}</el-tag></span
        >
        <el-button
          :icon="Promotion"
          @click="handlePublish"
          v-if="info.releaseStatus == 1 || info.releaseStatus == 2"
          >取消发布</el-button
        >
        <el-button type="primary" :icon="Promotion" @click="handlePublish" v-else>发布</el-button>
      </section>
    </main>
    <main class="publish-set">
      <header>
        <span>发布设置</span>
      </header>
      <section>
        <div>
          <span>版本号</span>
          <span>{{ info.version }}</span>
          <el-button
            @click="handleUpdateVersion"
            :icon="EditPen"
            :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
          />
        </div>
        <div>
          <span>运行环境</span>
          <span>{{ envName }}</span>
          <el-button
            @click="handleUpdateEnv"
            :icon="EditPen"
            :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
          />
        </div>
      </section>
    </main>
    <main class="publish-base">
      <header>
        <span>基础设置</span>
      </header>
      <section>
        <header>基本信息</header>
        <section>
          <div>
            <span>标题</span>
            <span>{{ info.name }}</span>
            <el-button
              @click="handleUpdateTitle"
              :icon="EditPen"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
          <div>
            <span>Logo</span>
            <img :src="info.logo" alt="" srcset="" height="40" />
            <el-button
              @click="handleUpdateLogo"
              :icon="EditPen"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
          <div>
            <span>描述</span>
            <el-tooltip :content="info.description" placement="top">
              <small class="desc">{{ info.description }}</small>
            </el-tooltip>
            <el-button
              @click="handleUpdateDes"
              :icon="EditPen"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
        </section>
        <header>文档内容</header>
        <section>
          <div>
            <span>前置URL</span>
            <el-switch
              v-model="info.isShowPrefixUrl"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
          <div>
            <span>最后修改时间</span>
            <el-switch
              v-model="info.isShowUpdatedAt"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
        </section>
        <header>高级设置</header>
        <section>
          <div>
            <span>展示 "调试" 按钮</span>
            <el-switch
              v-model="info.isShowTryItOutButton"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
          <div>
            <span>允许 "导出"、"克隆" 数据</span>
            <el-switch
              v-model="info.exportable"
              :disabled="info.releaseStatus == 1 || info.releaseStatus == 2"
            />
          </div>
        </section>
      </section>
    </main>
    <!-- 更新描述 -->
    <update-des ref="desDialogRef" @success="handleDesSuccess" />
    <!-- 更新logo -->
    <update-logo ref="logoDialogRef" @success="handleLogoSuccess" />
    <!-- 更新标题 -->
    <update-title ref="titleDialogRef" @success="handleTitleSuccess" />
    <!-- 更新version -->
    <updateVersion ref="versionDialogRef" @success="handleVersionSuccess" />
    <!-- 更新环境 -->
    <updateEnv ref="envDialogRef" @success="handleEnvSuccess" />
  </div>
</template>

<script setup lang="ts">
import * as DebugApi from '@/api/debug'
import * as environmentApi from '@/api/environment'
import { Promotion, EditPen } from '@element-plus/icons-vue'
import updateDes from './dialog/updateDes.vue'
import updateLogo from './dialog/updateLogo.vue'
import updateTitle from './dialog/updateTitle.vue'
import { useAppStore } from '@/store/modules/app'
import updateVersion from './dialog/updateVersion.vue'
import updateEnv from './dialog/updateEnv.vue'
import { useDebugStore } from '@/store/modules/debug'
const { t } = useI18n() // 国际化
const debugStore = useDebugStore()
const environments = ref([] as any)
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const desDialogRef = ref()
const logoDialogRef = ref()
const titleDialogRef = ref()
const versionDialogRef = ref()
const envDialogRef = ref()
const message = useMessage() // 消息弹窗
const info = ref({} as any)
const status = {
  1: '审核中',
  2: '已发布',
  3: '已拒绝',
  4: '已取消',
  5: '未发布'
}
const type = {
  1: 'warning',
  2: 'success',
  3: 'error',
  4: 'info',
  5: 'primary'
}
const envName = computed(() => {
  const env = environments.value.find((k) => k.id == info.value.environmentId)
  if (env) {
    return env.name
  }
})
watch(
  () => projectId.value,
  async () => {
    getPublishInfo()
    getEnvironments()
  }
)
/** 获取环境列表 */
const getEnvironments = async () => {
  let res = await environmentApi.getEnvironmentList()
  environments.value = res
  debugStore.setEnvironments(res)
}
/** 获取发布信息 */
const getPublishInfo = async () => {
  let res = await DebugApi.getApiPublishInfo({ projectId: projectId.value })
  info.value = res
}
/** 更新标题 */
const handleUpdateTitle = () => {
  titleDialogRef.value.open(info.value.name)
}
const handleTitleSuccess = async (val) => {
  info.value.name = val
}
/** 更新logo */
const handleUpdateLogo = () => {
  logoDialogRef.value.open()
}
const handleLogoSuccess = (val) => {
  info.value.logo = val
}
/** 更新描述 */
const handleUpdateDes = () => {
  desDialogRef.value.open(info.value.description)
}
const handleDesSuccess = async (val) => {
  info.value.description = val
}
/** 更新环境 */
const handleUpdateEnv = () => {
  envDialogRef.value.open(info.value.environmentId)
}
const handleEnvSuccess = async (val) => {
  info.value.environmentId = val
}
/** 更新版本 */
const handleUpdateVersion = () => {
  versionDialogRef.value.open(info.value.version)
}
const handleVersionSuccess = async (val) => {
  info.value.version = val
}

/** 发布 */
const handlePublish = async () => {
  try {
    const isPublish = info.value.releaseStatus == 1 || info.value.releaseStatus == 2
    if (!isPublish) {
      if (!info.value.environmentId) {
        message.warning('请选择运行环境！')
        return
      } else if (!info.value.version) {
        message.warning('请输入版本号！')
        return
      } else if (!info.value.name) {
        message.warning('请输入标题！')
        return
      }
    }
    await message.confirm(isPublish ? '确定取消发布该项目' : '确定发布该项目？')
    await DebugApi.updateApiPublish(
      isPublish
        ? { id: info.value.id, projectId: projectId.value, releaseStatus: info.value.releaseStatus }
        : info.value
    )
    message.success(isPublish ? '取消发布成功' : '发布成功')
    getPublishInfo()
  } catch (error) {
    console.log(error)
  }
}
onMounted(() => {
  getEnvironments()
  if (projectId.value) {
    getPublishInfo()
  }
})
</script>

<style scoped lang="scss">
.publish {
  &-status {
    padding: 10px;
    background: beige;
    border-radius: 10px;

    header {
      display: flex;
      margin: 0 20px;
      font-size: 25px;
      line-height: 60px;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    section {
      display: flex;
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      justify-content: space-between;
    }
  }

  &-set,
  &-base {
    padding: 10px;
    margin-top: 20px;
    background: #f1f1e9;
    border-radius: 10px;

    > header {
      margin: 0 20px 10px;
      font-size: 16px;
      line-height: 30px;
    }

    section {
      padding: 10px 20px;
      font-size: 14px;
      background: #fff;
      border-radius: 5px;

      div {
        display: flex;
        height: 40px;
        padding: 5px 0;
        margin: 0;
        border-bottom: 1px solid #efefef;
        justify-content: space-between;
        align-items: center;

        &:last-child {
          border: none;
        }
      }

      > header {
        margin: 10px 0;
      }

      section {
        border: 1px solid #efefef;
      }
    }
  }

  .horizontal {
    display: flex;
    flex-direction: column;
  }

  .vertical {
    display: flex;
    flex-direction: row;
  }

  .edit {
    display: flex;
    align-items: center;
  }

  .desc {
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.dark {
  .publish {
    &-status {
      background: #55553c;
    }

    section {
      background: #656253;
    }

    &-set,
    &-base {
      background: #898984;

      section {
        background: #6562538a;
      }
    }
  }
}
</style>
